<template>
  <div class="container index ">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }" :modules="modules" :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :key="String(index)">
        <div class="headBox">
          <video class="video" :poster="item.pic_url" :src="item.video_url" autoplay muted playsinline="1" webkit-playsinline="1" v-if="item.video_url"></video>
          <div class="bg" :style="{backgroundImage: `url(${item.pic_url})`}" v-else></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{item.title}}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{item.brief}}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <NuxtLink to="/location" class="button-container animate__animated animate__zoomIn">
              <button class="glow-button" style="--btn-color: #ffffff;">
                了解更多>>
              </button>
            </NuxtLink>

          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Autoplay} from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
const data = await serverRequest.get('home/index');
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - 首页` : '红河大成房地产';
  },
  meta: [
    { name: 'description', content: '红河大成房地产' },
    { name: 'keyword', content: '红河大成房地产' }
  ],

})

</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
